import React, { useCallback } from 'react'
import Taro from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import { PlanManagementITF } from '@INTERFACES/PlanManagement'
import Navigate from '@NAVIGATION/navigateManager'
import { Analytic_Type } from '@CONSTANTS/analytic'
import ImageBackground from '@COMPONENTS/ImageBackground'
import { CHARGE_TYPE_ENUM } from '@CONSTANTS/order'
import Images from '@ASSET/Images'
import DBConfig from '@CONFIG/DBConfig'
import style from './ManagementCard.module.scss'

interface Props {
  data: PlanManagementITF;
  onClick?: (item: PlanManagementITF) => void;
  language: 'zh' | 'en';
  prevScene?: string;
  requestId?: string;
  scene?: string;
  containerClass?: string;
  titleClass?: string;
  contentClass?: string;
  priceNumClass?: string;
  originalPriceClass?: string;
  durationTitleClass?: string;
  joinBtnClass?: string;
  joinBtnTextClass?: string;
  promoClass?: string;
  iconClass?: string;
  durationItemClass?: string;
  hideBtn?: boolean;
}

const ManagementCard: React.FC<Props> = ({
  data, language, onClick,
  prevScene, requestId, scene, containerClass, titleClass
  , contentClass, priceNumClass, durationTitleClass, originalPriceClass,
  joinBtnClass, joinBtnTextClass, promoClass, hideBtn, iconClass, durationItemClass
}) => {
  const { p8Id, TemplateId, Title, Duration, Price, OriginalPrice, PromoNote, ChargeType, PreviewPictureFileName } = data
  const title = Title?.[language] || ''
  const promo = PromoNote?.[language] || ''
  const tId = p8Id || TemplateId
  const isPay = ChargeType === CHARGE_TYPE_ENUM.Pay
  const onClickFunc = useCallback(event => {
    event?.stopPropagation?.()
    if (onClick) {
      onClick(data)
      return
    }
    Taro.tracker.trackEvent(Analytic_Type.tap_pain_plan.eventId, { title }, { PrevScene: prevScene, RequestId: requestId, Scene: scene })
    Navigate.managePlan({ tId, requestId })
  }, [onClick, title, prevScene, requestId, scene, tId, data])

  if (!data) return null
  const bg = isPay ? Images.managePlan.bg_plan_card_pay : Images.managePlan.bg_plan_card_free
  const bgUrl = PreviewPictureFileName ? `${DBConfig.staticPainManagementUrl}${PreviewPictureFileName}` : bg
  return (
    <ImageBackground
      src={bgUrl}
      containerClassName={`${style.container} ${containerClass}`}
      onClick={onClickFunc}
    >
      <Text className={`${style.name} ${titleClass}`}>{title}</Text>
      <Text className={`${style.promo} ${promoClass}`}>{promo}</Text>
      <View className={`${style.content} ${contentClass}`}>
        <View className={style.column}>
          <View className={style.row}>
            <Image src={Images.managePlan.icon_manage_card_cost} className={`${style.icon} ${iconClass}`} />
            <View className={style.priceContainer}>
              <Text className={style.priceUnit}>{'¥ '}</Text>
              <Text className={`${style.priceNum} ${priceNumClass}`}>{Price || 0}</Text>
              {!!OriginalPrice && <Text className={`${style.priceDelete} ${originalPriceClass}`}>{`¥ ${OriginalPrice}`}</Text>}
            </View>
          </View>
          <View className={`${style.row} ${style.durationItem} ${durationItemClass}`}>
            <Image src={Images.managePlan.icon_manage_card_date} className={`${style.icon} ${iconClass}`} />
            <Text className={`${style.durationTitle} ${durationTitleClass}`}>{`周期：${Duration || ''}天`}</Text>
          </View>
        </View>
        {!hideBtn && (
          <View className={`${style.join_btn} ${joinBtnClass}`}>
            <Text className={`${style.btn_text} ${joinBtnTextClass}`}>
              了解详情
            </Text>
          </View>
        )}
      </View>
    </ImageBackground>
  )
}

export default ManagementCard
